<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--    &lt;!&ndash; 基础元数据 &ndash;&gt;-->
<!--    <meta charset="UTF-8">  &lt;!&ndash; 设置字符编码为UTF-8 &ndash;&gt;-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">  &lt;!&ndash; 响应式视口设置 &ndash;&gt;-->
<!--    <title>全国电动汽车数据销售数据可视化仪平台</title>  &lt;!&ndash; 页面标题 &ndash;&gt;-->

<!--    &lt;!&ndash; 引入外部资源 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">  &lt;!&ndash; Font Awesome图标库 &ndash;&gt;-->
<!--    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  &lt;!&ndash; Chart.js图表库 &ndash;&gt;-->

<!--    <style>-->
<!--        /* ========== 全局样式重置 ========== */-->
<!--        * {-->
<!--            margin: 0;          /* 清除所有元素默认外边距 */-->
<!--            padding: 0;         /* 清除所有元素默认内边距 */-->
<!--            box-sizing: border-box; /* 使用border-box盒模型 */-->
<!--            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 设置默认字体 */-->
<!--        }-->

<!--        /* ========== CSS变量定义 ========== */-->
<!--        :root {-->
<!--            &#45;&#45;primary: #1e3a8a;       /* 主色调 - 深蓝色 */-->
<!--            &#45;&#45;secondary: #10b981;    /* 次要色调 - 绿色 */-->
<!--            &#45;&#45;accent: #3b82f6;       /* 强调色 - 蓝色 */-->
<!--            &#45;&#45;light: #f8fafc;        /* 浅色背景 */-->
<!--            &#45;&#45;dark: #0f172a;         /* 深色文字 */-->
<!--            &#45;&#45;gray: #94a3b8;         /* 灰色文字 */-->
<!--            &#45;&#45;card-bg: rgba(255, 255, 255, 0.95);  /* 卡片背景 */-->
<!--            &#45;&#45;sidebar-width: 280px;   /* 侧边栏宽度 */-->
<!--            &#45;&#45;header-height: 80px;    /* 头部高度 */-->
<!--        }-->

<!--        /* ========== 页面主体样式 ========== */-->
<!--        body {-->
<!--            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* 渐变背景 */-->
<!--            color: var(&#45;&#45;dark);       /* 文字颜色 */-->
<!--            min-height: 100vh;        /* 最小高度为视口高度 */-->
<!--            display: flex;            /* 使用flex布局 */-->
<!--            flex-direction: column;   /* 垂直排列 */-->
<!--            overflow-x: hidden;      /* 隐藏水平滚动条 */-->
<!--        }-->

<!--        /* ========== 头部样式 ========== */-->
<!--        .header {-->
<!--            background: linear-gradient(90deg, var(&#45;&#45;primary) 0%, #0c2043 100%); /* 渐变背景 */-->
<!--            color: white;             /* 文字颜色 */-->
<!--            padding: 0 30px;         /* 左右内边距 */-->
<!--            height: var(&#45;&#45;header-height); /* 使用变量定义的高度 */-->
<!--            display: flex;            /* 使用flex布局 */-->
<!--            justify-content: space-between; /* 两端对齐 */-->
<!--            align-items: center;      /* 垂直居中 */-->
<!--            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--            z-index: 100;             /* 确保在最上层 */-->
<!--        }-->

<!--        /* ========== 标志样式 ========== */-->
<!--        .logo {-->
<!--            display: flex;           /* 使用flex布局 */-->
<!--            align-items: center;     /* 垂直居中 */-->
<!--            gap: 15px;              /* 子元素间距 */-->
<!--        }-->

<!--        /* 标志图标动画 */-->
<!--        .logo i {-->
<!--            color: var(&#45;&#45;secondary); /* 使用次要色调 */-->
<!--            font-size: 2rem;        /* 图标大小 */-->
<!--            animation: pulse 2s infinite; /* 脉冲动画 */-->
<!--        }-->

<!--        /* 脉冲动画关键帧 */-->
<!--        @keyframes pulse {-->
<!--            0%,100% { transform: scale(1); }  /* 正常大小 */-->
<!--            50% { transform: scale(1.1); }    /* 放大10% */-->
<!--        }-->

<!--        .logo h1 {-->
<!--            font-size: 1.8rem;      /* 标题大小 */-->
<!--            font-weight: 700;       /* 字体粗细 */-->
<!--        }-->

<!--        .logo a {-->
<!--            color: var(&#45;&#45;secondary); /* 链接颜色 */-->
<!--            font-size: 0.9rem;      /* 字体大小 */-->
<!--            margin-top: 5px;       /* 顶部外边距 */-->
<!--            display: block;         /* 块级显示 */-->
<!--            transition: all 0.3s ease; /* 过渡效果 */-->
<!--            text-decoration: none;  /* 无下划线 */-->
<!--        }-->

<!--        .logo a:hover {-->
<!--            color: white;           /* 悬停颜色 */-->
<!--            text-decoration: underline; /* 下划线效果 */-->
<!--        }-->

<!--        /* ========== 控制区域样式 ========== */-->
<!--        .controls {-->
<!--            display: flex;          /* 使用flex布局 */-->
<!--            gap: 20px;              /* 子元素间距 */-->
<!--            align-items: center;    /* 垂直居中 */-->
<!--        }-->

<!--        /* 日期显示样式 */-->
<!--        .date-display {-->
<!--            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */-->
<!--            padding: 8px 15px;     /* 内边距 */-->
<!--            border-radius: 20px;    /* 圆角边框 */-->
<!--            font-size: 0.9rem;      /* 字体大小 */-->
<!--            display: flex;          /* 使用flex布局 */-->
<!--            align-items: center;    /* 垂直居中 */-->
<!--            gap: 8px;               /* 子元素间距 */-->
<!--        }-->

<!--        /* 退出按钮样式 */-->
<!--        .logout-btn {-->
<!--            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */-->
<!--            color: white;           /* 文字颜色 */-->
<!--            border: none;          /* 无边框 */-->
<!--            padding: 8px 15px;     /* 内边距 */-->
<!--            border-radius: 20px;    /* 圆角边框 */-->
<!--            font-size: 0.9rem;      /* 字体大小 */-->
<!--            display: flex;          /* 使用flex布局 */-->
<!--            align-items: center;    /* 垂直居中 */-->
<!--            gap: 8px;               /* 子元素间距 */-->
<!--            cursor: pointer;        /* 手型光标 */-->
<!--            transition: all 0.3s ease; /* 过渡效果 */-->
<!--        }-->

<!--        .logout-btn:hover {-->
<!--            background: rgba(255, 255, 255, 0.3); /* 悬停背景色 */-->
<!--        }-->

<!--        /* ========== 仪表盘容器 ========== */-->
<!--        .dashboard-container {-->
<!--            display: flex;         /* 使用flex布局 */-->
<!--            flex: 1;              /* 填充剩余空间 */-->
<!--            padding: 20px;         /* 内边距 */-->
<!--            gap: 20px;             /* 子元素间距 */-->
<!--            height: calc(100vh - var(&#45;&#45;header-height) - 40px); /* 计算高度 */-->
<!--        }-->

<!--        /* ========== 侧边导航栏 ========== */-->
<!--        .sidebar {-->
<!--            width: var(&#45;&#45;sidebar-width); /* 使用变量定义的宽度 */-->
<!--            background: var(&#45;&#45;card-bg); /* 使用卡片背景色 */-->
<!--            border-radius: 16px;   /* 圆角边框 */-->
<!--            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 阴影效果 */-->
<!--            padding: 20px;         /* 内边距 */-->
<!--            display: flex;         /* 使用flex布局 */-->
<!--            flex-direction: column; /* 垂直排列 */-->
<!--            gap: 20px;             /* 子元素间距 */-->
<!--            overflow-y: auto;      /* 垂直滚动条 */-->
<!--        }-->

<!--        /* ========== 导航部分样式 ========== */-->
<!--        .nav-section {-->
<!--            margin-bottom: 15px;   /* 底部外边距 */-->
<!--        }-->

<!--        /* 导航标题 */-->
<!--        .nav-title {-->
<!--            font-size: 1.1rem;      /* 字体大小 */-->
<!--            font-weight: 600;      /* 字体粗细 */-->
<!--            color: var(&#45;&#45;primary); /* 使用主色调 */-->
<!--            margin-bottom: 15px;   /* 底部外边距 */-->
<!--            display: flex;        /* 使用flex布局 */-->
<!--            align-items: center;   /* 垂直居中 */-->
<!--            gap: 10px;            /* 子元素间距 */-->
<!--        }-->

<!--        .nav-title i {-->
<!--            color: var(&#45;&#45;accent);  /* 使用强调色 */-->
<!--        }-->

<!--        /* 导航链接 */-->
<!--        .nav-links {-->
<!--            display: flex;         /* 使用flex布局 */-->
<!--            flex-direction: column; /* 垂直排列 */-->
<!--            gap: 12px;            /* 子元素间距 */-->
<!--        }-->

<!--        /* 导航项 */-->
<!--        .nav-item {-->
<!--            padding: 12px 15px;    /* 内边距 */-->
<!--            background: #f1f5f9;   /* 背景色 */-->
<!--            border-radius: 10px;   /* 圆角边框 */-->
<!--            display: flex;        /* 使用flex布局 */-->
<!--            align-items: center;   /* 垂直居中 */-->
<!--            gap: 12px;            /* 子元素间距 */-->
<!--            cursor: pointer;      /* 手型光标 */-->
<!--            transition: all 0.3s ease; /* 过渡效果 */-->
<!--            border-left: 4px solid transparent; /* 透明左边框 */-->
<!--        }-->

<!--        /* 悬停效果 */-->
<!--        .nav-item:hover {-->
<!--            background: #e2e8f0;   /* 悬停背景色 */-->
<!--            border-left: 4px solid var(&#45;&#45;accent); /* 左边框颜色 */-->
<!--        }-->

<!--        /* 激活状态 */-->
<!--        .nav-item.active {-->
<!--            background: #dbeafe;    /* 激活背景色 */-->
<!--            border-left: 4px solid var(&#45;&#45;primary); /* 左边框颜色 */-->
<!--        }-->

<!--        .nav-item i {-->
<!--            width: 24px;           /* 固定宽度 */-->
<!--            text-align: center;     /* 文字居中 */-->
<!--            color: var(&#45;&#45;primary);  /* 使用主色调 */-->
<!--        }-->

<!--        /* ========== 主内容区 ========== */-->
<!--        .main-content {-->
<!--            flex: 1;                /* 填充剩余空间 */-->
<!--            background: var(&#45;&#45;card-bg); /* 使用卡片背景色 */-->
<!--            border-radius: 16px;    /* 圆角边框 */-->
<!--            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 阴影效果 */-->
<!--            position: relative;     /* 相对定位 */-->
<!--            overflow: hidden;      /* 隐藏溢出内容 */-->
<!--        }-->

<!--        /* 内容容器 */-->
<!--        .content-container {-->
<!--            width: 100%;           /* 宽度100% */-->
<!--            height: 100%;          /* 高度100% */-->
<!--            display: flex;         /* 使用flex布局 */-->
<!--            flex-direction: column; /* 垂直排列 */-->
<!--        }-->

<!--        /* 内容头部 */-->
<!--        .content-header {-->
<!--            padding: 20px;         /* 内边距 */-->
<!--            display: flex;         /* 使用flex布局 */-->
<!--            justify-content: space-between; /* 两端对齐 */-->
<!--            align-items: center;    /* 垂直居中 */-->
<!--            border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 底部边框 */-->
<!--        }-->

<!--        /* 内容标题 */-->
<!--        .content-title {-->
<!--            font-size: 1.3rem;     /* 字体大小 */-->
<!--            font-weight: 600;      /* 字体粗细 */-->
<!--            color: var(&#45;&#45;primary); /* 使用主色调 */-->
<!--            display: flex;        /* 使用flex布局 */-->
<!--            align-items: center;   /* 垂直居中 */-->
<!--            gap: 10px;            /* 子元素间距 */-->
<!--        }-->

<!--        /* 内容操作按钮 */-->
<!--        .content-actions {-->
<!--            display: flex;         /* 使用flex布局 */-->
<!--            gap: 10px;             /* 子元素间距 */-->
<!--        }-->

<!--        .action-btn {-->
<!--            background: #f1f5f9;   /* 背景色 */-->
<!--            border: none;         /* 无边框 */-->
<!--            width: 36px;           /* 固定宽度 */-->
<!--            height: 36px;          /* 固定高度 */-->
<!--            border-radius: 50%;    /* 圆形 */-->
<!--            color: var(&#45;&#45;primary); /* 使用主色调 */-->
<!--            display: flex;        /* 使用flex布局 */-->
<!--            align-items: center;   /* 垂直居中 */-->
<!--            justify-content: center; /* 水平居中 */-->
<!--            cursor: pointer;      /* 手型光标 */-->
<!--            transition: all 0.3s ease; /* 过渡效果 */-->
<!--        }-->

<!--        .action-btn:hover {-->
<!--            background: var(&#45;&#45;accent); /* 悬停背景色 */-->
<!--            color: white;           /* 文字颜色 */-->
<!--        }-->

<!--        /* 内容主体 */-->
<!--        .content-body {-->
<!--            flex: 1;                /* 填充剩余空间 */-->
<!--            padding: 15px;         /* 内边距 */-->
<!--            display: flex;         /* 使用flex布局 */-->
<!--            position: relative;    /* 相对定位 */-->
<!--        }-->

<!--        /* 图表容器 */-->
<!--        .chart-container {-->
<!--            width: 100%;           /* 宽度100% */-->
<!--            height: 100%;          /* 高度100% */-->
<!--            min-height: 400px;     /* 最小高度 */-->
<!--        }-->

<!--        /* iframe容器 */-->
<!--        .iframe-container {-->
<!--            width: 100%;           /* 宽度100% */-->
<!--            height: 100%;          /* 高度100% */-->
<!--            min-height: 500px;     /* 最小高度 */-->
<!--            border: none;         /* 无边框 */-->
<!--        }-->

<!--        /* 文本区域容器 */-->
<!--        .text-container {-->
<!--            width: 300px;          /* 固定宽度 */-->
<!--            padding: 15px;         /* 内边距 */-->
<!--            background: white;    /* 白色背景 */-->
<!--            border-radius: 8px;    /* 圆角边框 */-->
<!--            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 轻微阴影 */-->
<!--            margin-left: 20px;     /* 左侧外边距 */-->
<!--            overflow-y: auto;      /* 垂直滚动条 */-->
<!--        }-->

<!--        /* 文本区域标题 */-->
<!--        .text-title {-->
<!--            font-size: 1.1rem;     /* 字体大小 */-->
<!--            font-weight: 600;     /* 字体粗细 */-->
<!--            color: var(&#45;&#45;primary); /* 使用主色调 */-->
<!--            margin-bottom: 15px;   /* 底部外边距 */-->
<!--            padding-bottom: 10px;  /* 底部内边距 */-->
<!--            border-bottom: 1px solid #eee; /* 底部边框 */-->
<!--        }-->

<!--        /* 文本内容 */-->
<!--        .text-content {-->
<!--            font-size: 0.95rem;    /* 字体大小 */-->
<!--            line-height: 1.6;      /* 行高 */-->
<!--            color: var(&#45;&#45;dark);    /* 文字颜色 */-->
<!--        }-->

<!--        /* ========== 页脚 ========== */-->
<!--        .footer {-->
<!--            text-align: center;     /* 文字居中 */-->
<!--            padding: 20px;        /* 内边距 */-->
<!--            color: var(&#45;&#45;gray);    /* 使用灰色 */-->
<!--            font-size: 0.9rem;    /* 字体大小 */-->
<!--            border-top: 1px solid rgba(0, 0, 0, 0.05); /* 顶部边框 */-->
<!--        }-->

<!--        /* ========== 响应式设计 ========== */-->
<!--        @media (max-width: 1200px) {-->
<!--            .dashboard-container {-->
<!--                flex-direction: column; /* 垂直排列 */-->
<!--                height: auto;    /* 自动高度 */-->
<!--            }-->
<!--            .sidebar {-->
<!--                width: 100%;     /* 宽度100% */-->
<!--                max-height: 300px; /* 最大高度 */-->
<!--            }-->
<!--            .content-body {-->
<!--                flex-direction: column; /* 垂直排列 */-->
<!--            }-->
<!--            .text-container {-->
<!--                width: 100%;     /* 宽度100% */-->
<!--                margin-left: 0;   /* 无左侧外边距 */-->
<!--                margin-top: 20px; /* 顶部外边距 */-->
<!--            }-->
<!--        }-->

<!--        @media (max-width: 768px) {-->
<!--            .header {-->
<!--                flex-direction: column; /* 垂直排列 */-->
<!--                height: auto;    /* 自动高度 */-->
<!--                padding: 15px;   /* 内边距 */-->
<!--                gap: 15px;      /* 子元素间距 */-->
<!--            }-->
<!--            .controls {-->
<!--                flex-wrap: wrap; /* 换行 */-->
<!--                justify-content: center; /* 水平居中 */-->
<!--            }-->
<!--            .logo {-->
<!--                flex-direction: column; /* 垂直排列 */-->
<!--                align-items: flex-start; /* 左对齐 */-->
<!--            }-->
<!--            .logo a {-->
<!--                margin-top: 8px; /* 顶部外边距 */-->
<!--            }-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    &lt;!&ndash; ========== 头部区域 ========== &ndash;&gt;-->
<!--    <div class="header">-->
<!--        <div class="logo">-->
<!--            <i class="fas fa-bolt"></i>  &lt;!&ndash; 闪电图标 &ndash;&gt;-->
<!--            <div>-->
<!--                <h1>全国电动汽车数据销售数据可视化仪平台</h1>  &lt;!&ndash; 主标题 &ndash;&gt;-->
<!--                <a href="全国电动汽车用户数据分析平台.html">全国电动汽车用户数据分析平台</a>  &lt;!&ndash; 副标题链接 &ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="controls">-->
<!--            <div class="date-display">-->
<!--                <i class="fas fa-calendar-alt"></i>  &lt;!&ndash; 日历图标 &ndash;&gt;-->
<!--                <span id="current-date">2025年5月15日</span>  &lt;!&ndash; 当前日期显示 &ndash;&gt;-->
<!--            </div>-->
<!--            <button class="logout-btn" id="logout-btn">-->
<!--                <i class="fas fa-sign-out-alt"></i>  &lt;!&ndash; 退出图标 &ndash;&gt;-->
<!--                <span>退出</span>  &lt;!&ndash; 退出文本 &ndash;&gt;-->
<!--            </button>-->
<!--        </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; ========== 主内容区域 ========== &ndash;&gt;-->
<!--    <div class="dashboard-container">-->
<!--        &lt;!&ndash; 侧边导航栏 &ndash;&gt;-->
<!--        <div class="sidebar">-->
<!--            &lt;!&ndash; 可视化大屏部分 &ndash;&gt;-->
<!--            <div class="nav-section">-->
<!--                <div class="nav-title">-->
<!--                    <i class="fas fa-tv"></i>  &lt;!&ndash; 电视图标 &ndash;&gt;-->
<!--                    <span>可视化大屏</span>  &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="nav-links">-->
<!--                    &lt;!&ndash; 全国销售数据大屏导航项 &ndash;&gt;-->
<!--                    <div class="nav-item active" data-content="dashboard" data-src="result/全国电动汽车销售数据可视化大屏.html">-->
<!--                        <i class="fas fa-desktop"></i>  &lt;!&ndash; 桌面图标 &ndash;&gt;-->
<!--                        <span>全国销售数据大屏</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            &lt;!&ndash; 地图导航部分 &ndash;&gt;-->
<!--            <div class="nav-section">-->
<!--                <div class="nav-title">-->
<!--                    <i class="fas fa-map"></i>  &lt;!&ndash; 地图图标 &ndash;&gt;-->
<!--                    <span>地图导航</span>  &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="nav-links">-->
<!--                    &lt;!&ndash; 全国销量地图导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="map" data-src="result/全国电动汽车销量地图.html">-->
<!--                        <i class="fas fa-globe-asia"></i>  &lt;!&ndash; 地球图标 &ndash;&gt;-->
<!--                        <span>全国销量地图</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            &lt;!&ndash; 销售分析部分 &ndash;&gt;-->
<!--            <div class="nav-section">-->
<!--                <div class="nav-title">-->
<!--                    <i class="fas fa-chart-line"></i>  &lt;!&ndash; 折线图图标 &ndash;&gt;-->
<!--                    <span>销售分析</span>  &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="nav-links">-->
<!--                    &lt;!&ndash; 品牌销量利润对比导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="sales-comparison" data-src="result/品牌销量利润对比柱状图.html">-->
<!--                        <i class="fas fa-chart-bar"></i>  &lt;!&ndash; 柱状图图标 &ndash;&gt;-->
<!--                        <span>品牌销量利润对比</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                    &lt;!&ndash; 销量趋势分析导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="trends" data-src="result/销量趋势折线图.html">-->
<!--                        <i class="fas fa-chart-line"></i>  &lt;!&ndash; 折线图图标 &ndash;&gt;-->
<!--                        <span>销量趋势分析</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                    &lt;!&ndash; 月度热销产品导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="top-products" data-src="result/月度热销产品动态柱状图.html">-->
<!--                        <i class="fas fa-medal"></i>  &lt;!&ndash; 奖牌图标 &ndash;&gt;-->
<!--                        <span>月度热销产品</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            &lt;!&ndash; 价格分析部分 &ndash;&gt;-->
<!--            <div class="nav-section">-->
<!--                <div class="nav-title">-->
<!--                    <i class="fas fa-tags"></i>  &lt;!&ndash; 标签图标 &ndash;&gt;-->
<!--                    <span>价格分析</span>  &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="nav-links">-->
<!--                    &lt;!&ndash; 品牌价格对比导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="price-comparison" data-src="result/品牌价格对比柱状图.html">-->
<!--                        <i class="fas fa-tags"></i>  &lt;!&ndash; 标签图标 &ndash;&gt;-->
<!--                        <span>品牌价格对比</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                    &lt;!&ndash; 价格区间分布导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="price-distribution" data-src="result/价格区间分布柱状图.html">-->
<!--                        <i class="fas fa-money-bill-wave"></i>  &lt;!&ndash; 钱币图标 &ndash;&gt;-->
<!--                        <span>价格区间分布</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            &lt;!&ndash; 分布分析部分 &ndash;&gt;-->
<!--            <div class="nav-section">-->
<!--                <div class="nav-title">-->
<!--                    <i class="fas fa-pie-chart"></i>  &lt;!&ndash; 饼图图标 &ndash;&gt;-->
<!--                    <span>分布分析</span>  &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="nav-links">-->
<!--                    &lt;!&ndash; 品牌销量占比导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="sales-distribution" data-src="result/品牌销量占比饼图.html">-->
<!--                        <i class="fas fa-chart-pie"></i>  &lt;!&ndash; 饼图图标 &ndash;&gt;-->
<!--                        <span>品牌销量占比</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                    &lt;!&ndash; 销售流向分析导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="sales-flow" data-src="result/销售流向桑基图.html">-->
<!--                        <i class="fas fa-exchange-alt"></i>  &lt;!&ndash; 交换图标 &ndash;&gt;-->
<!--                        <span>销售流向分析</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            &lt;!&ndash; 利润分析部分 &ndash;&gt;-->
<!--            <div class="nav-section">-->
<!--                <div class="nav-title">-->
<!--                    <i class="fas fa-coins"></i>  &lt;!&ndash; 硬币图标 &ndash;&gt;-->
<!--                    <span>利润分析</span>  &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="nav-links">-->
<!--                    &lt;!&ndash; 品牌利润占比导航项 &ndash;&gt;-->
<!--                    <div class="nav-item" data-content="profit-share" data-src="result/品牌利润占比饼图.html">-->
<!--                        <i class="fas fa-coins"></i>  &lt;!&ndash; 硬币图标 &ndash;&gt;-->
<!--                        <span>品牌利润占比</span>  &lt;!&ndash; 导航项文本 &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 主内容区 &ndash;&gt;-->
<!--        <div class="main-content">-->
<!--            <div class="content-container" id="content-container">-->
<!--                <div class="content-header">-->
<!--                    <div class="content-title" id="content-title">-->
<!--                        <i class="fas fa-desktop"></i>  &lt;!&ndash; 桌面图标 &ndash;&gt;-->
<!--                        <span>全国电动汽车销售数据大屏</span>  &lt;!&ndash; 内容标题 &ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="content-actions">-->
<!--                        <button class="action-btn" title="刷新" id="refresh-btn"><i class="fas fa-sync-alt"></i></button>  &lt;!&ndash; 刷新按钮 &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="content-body">-->
<!--                    &lt;!&ndash; iframe用于加载各个图表HTML文件 &ndash;&gt;-->
<!--                    <iframe id="content-frame" class="iframe-container" src="result/全国电动汽车销售数据可视化大屏.html" frameborder="0"></iframe>-->
<!--                    &lt;!&ndash; 文本区域 - 初始为空，只有在大屏模块不显示 &ndash;&gt;-->
<!--                    <div class="text-container" id="text-container" style="display: none;">-->
<!--                        <div class="text-title">数据分析说明</div>-->
<!--                        <div class="text-content" id="text-content">-->
<!--                            &lt;!&ndash; 这里将动态填充文本内容 &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; ========== 页脚区域 ========== &ndash;&gt;-->
<!--    <div class="footer">-->
<!--        <p>© 2025 电动汽车数据分析平台 | 数据更新时间: <span id="update-time">2025年11月15日</span></p>  &lt;!&ndash; 版权信息和更新时间 &ndash;&gt;-->
<!--    </div>-->

<!--    <script>-->
<!--        // ========== 页面初始化 ==========-->

<!--        // 设置当前日期-->
<!--        document.getElementById('current-date').textContent =-->
<!--            new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });-->

<!--        // 设置数据更新时间-->
<!--        document.getElementById('update-time').textContent =-->
<!--            new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });-->

<!--        // ========== 内容标题映射对象 ==========-->
<!--        // 用于根据导航项的data-content属性值获取对应的图标和标题-->
<!--        const contentTitles = {-->
<!--            'dashboard': ['fas fa-desktop', '全国电动汽车销售数据大屏'],-->
<!--            'map': ['fas fa-globe-asia', '全国电动汽车销量地图'],-->
<!--            'sales-comparison': ['fas fa-chart-bar', '品牌销量利润对比'],-->
<!--            'trends': ['fas fa-chart-line', '销量趋势分析'],-->
<!--            'top-products': ['fas fa-medal', '月度热销产品'],-->
<!--            'price-comparison': ['fas fa-tags', '品牌价格对比'],-->
<!--            'price-distribution': ['fas fa-money-bill-wave', '价格区间分布'],-->
<!--            'sales-distribution': ['fas fa-chart-pie', '品牌销量占比'],-->
<!--            'sales-flow': ['fas fa-exchange-alt', '销售流向分析'],-->
<!--            'profit-share': ['fas fa-coins', '品牌利润占比']-->
<!--        };-->

<!--        // ========== 切换内容视图函数 ==========-->
<!--        /**-->
<!--         * 切换内容视图函数-->
<!--         * @param {string} contentType - 内容类型，对应导航项的data-content属性-->
<!--         * @param {string} src - iframe要加载的HTML文件路径-->
<!--         */-->
<!--        function showContent(contentType, src) {-->
<!--            const contentTitle = document.getElementById('content-title');-->
<!--            // 从映射对象中获取对应的图标和标题，如果没有则使用默认值-->
<!--            const [icon, title] = contentTitles[contentType] || ['fas fa-chart-bar', '数据图表'];-->

<!--            // 更新内容标题-->
<!--            contentTitle.innerHTML = `<i class="${icon}"></i><span>${title}</span>`;-->

<!--            // 加载外部HTML文件到iframe-->
<!--            const frame = document.getElementById('content-frame');-->
<!--            frame.src = src;-->

<!--            // 获取文本容器-->
<!--            const textContainer = document.getElementById('text-container');-->
<!--            const textContent = document.getElementById('text-content');-->

<!--            // 如果是大屏模块，隐藏文本区域；否则显示并填充内容-->
<!--            if (contentType === 'dashboard') {-->
<!--                textContainer.style.display = 'none';-->
<!--                // 调整iframe宽度为100%-->
<!--                frame.style.width = '100%';-->
<!--            } else {-->
<!--                textContainer.style.display = 'block';-->
<!--                // 调整iframe宽度为calc(100% - 320px)-->
<!--                frame.style.width = 'calc(100% - 320px)';-->

<!--                // 根据不同的内容类型填充不同的文本-->
<!--                let contentText = '';-->
<!--                switch(contentType) {-->
<!--                    case 'map':-->
<!--                        contentText = '此地图展示了全国各省市电动汽车的销售分布情况。颜色越深的区域表示销量越高，您可以直观地看到哪些地区的电动汽车市场更为活跃。';-->
<!--                        break;-->
<!--                    case 'sales-comparison':-->
<!--                        contentText = '此图表对比了不同品牌电动汽车的销量和利润情况。柱状图的高度代表销量，颜色深浅代表利润率。通过此图可以分析哪些品牌的市场表现最佳。';-->
<!--                        break;-->
<!--                    case 'trends':-->
<!--                        contentText = '此趋势图展示了电动汽车销量的月度变化情况。通过分析趋势线，可以预测未来的销售走向，为市场策略提供数据支持。';-->
<!--                        break;-->
<!--                    case 'top-products':-->
<!--                        contentText = '此动态柱状图展示了每月最畅销的电动汽车型号。排名会随着时间变化，可以帮助您了解市场上的热门产品。';-->
<!--                        break;-->
<!--                    case 'price-comparison':-->
<!--                        contentText = '此图表对比了不同品牌电动汽车的价格区间。通过对比可以了解各品牌的市场定位和价格策略。';-->
<!--                        break;-->
<!--                    case 'price-distribution':-->
<!--                        contentText = '此图表展示了电动汽车在不同价格区间的销售分布情况。可以帮助分析消费者对不同价位产品的接受程度。';-->
<!--                        break;-->
<!--                    case 'sales-distribution':-->
<!--                        contentText = '此饼图展示了各品牌电动汽车在总销量中的占比情况。可以直观地看到市场占有率分布。';-->
<!--                        break;-->
<!--                    case 'sales-flow':-->
<!--                        contentText = '此桑基图展示了电动汽车从生产到销售的流向情况。可以分析销售渠道的效率和不同地区的销售特点。';-->
<!--                        break;-->
<!--                    case 'profit-share':-->
<!--                        contentText = '此饼图展示了各品牌电动汽车在总利润中的占比情况。结合销量占比可以分析哪些品牌的盈利能力更强。';-->
<!--                        break;-->
<!--                    default:-->
<!--                        contentText = '这里是关于当前数据图表的分析和说明。您可以根据需要添加详细的数据解读和分析内容。';-->
<!--                }-->
<!--                textContent.innerHTML = contentText;-->
<!--            }-->
<!--        }-->

<!--        // ========== 页面加载完成后执行 ==========-->
<!--        document.addEventListener('DOMContentLoaded', () => {-->
<!--            // 初始化默认内容 - 获取当前激活的导航项-->
<!--            const defaultItem = document.querySelector('.nav-item.active');-->
<!--            if (defaultItem) {-->
<!--                const contentType = defaultItem.getAttribute('data-content');-->
<!--                const src = defaultItem.getAttribute('data-src');-->
<!--                showContent(contentType, src);-->
<!--            }-->

<!--            // 为所有导航项添加点击事件-->
<!--            document.querySelectorAll('.nav-item').forEach(item => {-->
<!--                item.addEventListener('click', function() {-->
<!--                    // 移除所有导航项的active类-->
<!--                    document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));-->
<!--                    // 为当前点击的导航项添加active类-->
<!--                    this.classList.add('active');-->

<!--                    // 获取当前导航项的数据属性-->
<!--                    const contentType = this.getAttribute('data-content');-->
<!--                    const src = this.getAttribute('data-src');-->

<!--                    // 切换内容视图-->
<!--                    showContent(contentType, src);-->
<!--                });-->
<!--            });-->

<!--            // 刷新按钮点击事件-->
<!--            document.getElementById('refresh-btn').addEventListener('click', function() {-->
<!--                const frame = document.getElementById('content-frame');-->
<!--                // 重新加载iframe内容-->
<!--                frame.src = frame.src;-->
<!--            });-->

<!--            // 退出按钮点击事件-->
<!--            document.getElementById('logout-btn').addEventListener('click', function() {-->
<!--                // 跳转到a.html页面-->
<!--                window.location.href = 'a.html';-->
<!--            });-->
<!--        });-->
<!--    </script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 基础元数据 -->
    <meta charset="UTF-8">  <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 响应式视口设置 -->
    <title>全国电动汽车数据销售数据可视化仪平台</title>  <!-- 页面标题 -->

    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">  <!-- Font Awesome图标库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  <!-- Chart.js图表库 -->

    <style>
        /* ========== 全局样式重置 ========== */
        * {
            margin: 0;          /* 清除所有元素默认外边距 */
            padding: 0;         /* 清除所有元素默认内边距 */
            box-sizing: border-box; /* 使用border-box盒模型 */
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 设置默认字体 */
        }

        /* ========== CSS变量定义 ========== */
        :root {
            --primary: #1e3a8a;       /* 主色调 - 深蓝色 */
            --secondary: #10b981;    /* 次要色调 - 绿色 */
            --accent: #3b82f6;       /* 强调色 - 蓝色 */
            --light: #f8fafc;        /* 浅色背景 */
            --dark: #0f172a;         /* 深色文字 */
            --gray: #94a3b8;         /* 灰色文字 */
            --card-bg: rgba(255, 255, 255, 0.95);  /* 卡片背景 */
            --sidebar-width: 280px;   /* 侧边栏宽度 */
            --header-height: 80px;    /* 头部高度 */
        }

        /* ========== 页面主体样式 ========== */
        body {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* 渐变背景 */
            color: var(--dark);       /* 文字颜色 */
            min-height: 100vh;        /* 最小高度为视口高度 */
            display: flex;            /* 使用flex布局 */
            flex-direction: column;   /* 垂直排列 */
            overflow-x: hidden;      /* 隐藏水平滚动条 */
        }

        /* ========== 头部样式 ========== */
        .header {
            background: linear-gradient(90deg, var(--primary) 0%, #0c2043 100%); /* 渐变背景 */
            color: white;             /* 文字颜色 */
            padding: 0 30px;         /* 左右内边距 */
            height: var(--header-height); /* 使用变量定义的高度 */
            display: flex;            /* 使用flex布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center;      /* 垂直居中 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            z-index: 100;             /* 确保在最上层 */
        }

        /* ========== 标志样式 ========== */
        .logo {
            display: flex;           /* 使用flex布局 */
            align-items: center;     /* 垂直居中 */
            gap: 15px;              /* 子元素间距 */
        }

        /* 标志图标动画 */
        .logo i {
            color: var(--secondary); /* 使用次要色调 */
            font-size: 2rem;        /* 图标大小 */
            animation: pulse 2s infinite; /* 脉冲动画 */
        }

        /* 脉冲动画关键帧 */
        @keyframes pulse {
            0%,100% { transform: scale(1); }  /* 正常大小 */
            50% { transform: scale(1.1); }    /* 放大10% */
        }

        .logo h1 {
            font-size: 1.8rem;      /* 标题大小 */
            font-weight: 700;       /* 字体粗细 */
        }

        .logo a {
            color: var(--secondary); /* 链接颜色 */
            font-size: 0.9rem;      /* 字体大小 */
            margin-top: 5px;       /* 顶部外边距 */
            display: block;         /* 块级显示 */
            transition: all 0.3s ease; /* 过渡效果 */
            text-decoration: none;  /* 无下划线 */
        }

        .logo a:hover {
            color: white;           /* 悬停颜色 */
            text-decoration: underline; /* 下划线效果 */
        }

        /* ========== 控制区域样式 ========== */
        .controls {
            display: flex;          /* 使用flex布局 */
            gap: 20px;              /* 子元素间距 */
            align-items: center;    /* 垂直居中 */
        }

        /* 日期显示样式 */
        .date-display {
            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
            padding: 8px 15px;     /* 内边距 */
            border-radius: 20px;    /* 圆角边框 */
            font-size: 0.9rem;      /* 字体大小 */
            display: flex;          /* 使用flex布局 */
            align-items: center;    /* 垂直居中 */
            gap: 8px;               /* 子元素间距 */
        }

        /* 退出按钮样式 */
        .logout-btn {
            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
            color: white;           /* 文字颜色 */
            border: none;          /* 无边框 */
            padding: 8px 15px;     /* 内边距 */
            border-radius: 20px;    /* 圆角边框 */
            font-size: 0.9rem;      /* 字体大小 */
            display: flex;          /* 使用flex布局 */
            align-items: center;    /* 垂直居中 */
            gap: 8px;               /* 子元素间距 */
            cursor: pointer;        /* 手型光标 */
            transition: all 0.3s ease; /* 过渡效果 */
        }

        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.3); /* 悬停背景色 */
        }

        /* ========== 仪表盘容器 ========== */
        .dashboard-container {
            display: flex;         /* 使用flex布局 */
            flex: 1;              /* 填充剩余空间 */
            padding: 20px;         /* 内边距 */
            gap: 20px;             /* 子元素间距 */
            height: calc(100vh - var(--header-height) - 40px); /* 计算高度 */
        }

        /* ========== 侧边导航栏 ========== */
        .sidebar {
            width: var(--sidebar-width); /* 使用变量定义的宽度 */
            background: var(--card-bg); /* 使用卡片背景色 */
            border-radius: 16px;   /* 圆角边框 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 阴影效果 */
            padding: 20px;         /* 内边距 */
            display: flex;         /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
            gap: 20px;             /* 子元素间距 */
            overflow-y: auto;      /* 垂直滚动条 */
        }

        /* ========== 导航部分样式 ========== */
        .nav-section {
            margin-bottom: 15px;   /* 底部外边距 */
        }

        /* 导航标题 */
        .nav-title {
            font-size: 1.1rem;      /* 字体大小 */
            font-weight: 600;      /* 字体粗细 */
            color: var(--primary); /* 使用主色调 */
            margin-bottom: 15px;   /* 底部外边距 */
            display: flex;        /* 使用flex布局 */
            align-items: center;   /* 垂直居中 */
            gap: 10px;            /* 子元素间距 */
        }

        .nav-title i {
            color: var(--accent);  /* 使用强调色 */
        }

        /* 导航链接 */
        .nav-links {
            display: flex;         /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
            gap: 12px;            /* 子元素间距 */
        }

        /* 导航项 */
        .nav-item {
            padding: 12px 15px;    /* 内边距 */
            background: #f1f5f9;   /* 背景色 */
            border-radius: 10px;   /* 圆角边框 */
            display: flex;        /* 使用flex布局 */
            align-items: center;   /* 垂直居中 */
            gap: 12px;            /* 子元素间距 */
            cursor: pointer;      /* 手型光标 */
            transition: all 0.3s ease; /* 过渡效果 */
            border-left: 4px solid transparent; /* 透明左边框 */
        }

        /* 悬停效果 */
        .nav-item:hover {
            background: #e2e8f0;   /* 悬停背景色 */
            border-left: 4px solid var(--accent); /* 左边框颜色 */
        }

        /* 激活状态 */
        .nav-item.active {
            background: #dbeafe;    /* 激活背景色 */
            border-left: 4px solid var(--primary); /* 左边框颜色 */
        }

        .nav-item i {
            width: 24px;           /* 固定宽度 */
            text-align: center;     /* 文字居中 */
            color: var(--primary);  /* 使用主色调 */
        }

        /* ========== 主内容区 ========== */
        .main-content {
            flex: 1;                /* 填充剩余空间 */
            background: var(--card-bg); /* 使用卡片背景色 */
            border-radius: 16px;    /* 圆角边框 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 阴影效果 */
            position: relative;     /* 相对定位 */
            overflow: hidden;      /* 隐藏溢出内容 */
        }

        /* 内容容器 */
        .content-container {
            width: 100%;           /* 宽度100% */
            height: 100%;          /* 高度100% */
            display: flex;         /* 使用flex布局 */
            flex-direction: column; /* 垂直排列 */
        }

        /* 内容头部 */
        .content-header {
            padding: 20px;         /* 内边距 */
            display: flex;         /* 使用flex布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center;    /* 垂直居中 */
            border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 底部边框 */
        }

        /* 内容标题 */
        .content-title {
            font-size: 1.3rem;     /* 字体大小 */
            font-weight: 600;      /* 字体粗细 */
            color: var(--primary); /* 使用主色调 */
            display: flex;        /* 使用flex布局 */
            align-items: center;   /* 垂直居中 */
            gap: 10px;            /* 子元素间距 */
        }

        /* 内容操作按钮 */
        .content-actions {
            display: flex;         /* 使用flex布局 */
            gap: 10px;             /* 子元素间距 */
        }

        .action-btn {
            background: #f1f5f9;   /* 背景色 */
            border: none;         /* 无边框 */
            width: 36px;           /* 固定宽度 */
            height: 36px;          /* 固定高度 */
            border-radius: 50%;    /* 圆形 */
            color: var(--primary); /* 使用主色调 */
            display: flex;        /* 使用flex布局 */
            align-items: center;   /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            cursor: pointer;      /* 手型光标 */
            transition: all 0.3s ease; /* 过渡效果 */
        }

        .action-btn:hover {
            background: var(--accent); /* 悬停背景色 */
            color: white;           /* 文字颜色 */
        }

        /* 内容主体 */
        .content-body {
            flex: 1;                /* 填充剩余空间 */
            padding: 15px;         /* 内边距 */
            display: flex;         /* 使用flex布局 */
            position: relative;    /* 相对定位 */
        }

        /* 图表容器 */
        .chart-container {
            width: 100%;           /* 宽度100% */
            height: 100%;          /* 高度100% */
            min-height: 400px;     /* 最小高度 */
        }

        /* iframe容器 */
        .iframe-container {
            width: 100%;           /* 宽度100% */
            height: 100%;          /* 高度100% */
            min-height: 500px;     /* 最小高度 */
            border: none;         /* 无边框 */
        }

        /* 文本区域容器 */
        .text-container {
            width: 300px;          /* 固定宽度 */
            padding: 15px;         /* 内边距 */
            background: white;    /* 白色背景 */
            border-radius: 8px;    /* 圆角边框 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
            margin-left: 20px;     /* 左侧外边距 */
            overflow-y: auto;      /* 垂直滚动条 */
        }

        /* 文本区域标题 */
        .text-title {
            font-size: 1.1rem;     /* 字体大小 */
            font-weight: 600;     /* 字体粗细 */
            color: var(--primary); /* 使用主色调 */
            margin-bottom: 15px;   /* 底部外边距 */
            padding-bottom: 10px;  /* 底部内边距 */
            border-bottom: 1px solid #eee; /* 底部边框 */
        }

        /* 文本内容 */
        .text-content {
            font-size: 0.95rem;    /* 字体大小 */
            line-height: 1.6;      /* 行高 */
            color: var(--dark);    /* 文字颜色 */
        }

        /* ========== 页脚 ========== */
        .footer {
            text-align: center;     /* 文字居中 */
            padding: 20px;        /* 内边距 */
            color: var(--gray);    /* 使用灰色 */
            font-size: 0.9rem;    /* 字体大小 */
            border-top: 1px solid rgba(0, 0, 0, 0.05); /* 顶部边框 */
        }

        /* ========== 响应式设计 ========== */
        @media (max-width: 1200px) {
            .dashboard-container {
                flex-direction: column; /* 垂直排列 */
                height: auto;    /* 自动高度 */
            }
            .sidebar {
                width: 100%;     /* 宽度100% */
                max-height: 300px; /* 最大高度 */
            }
            .content-body {
                flex-direction: column; /* 垂直排列 */
            }
            .text-container {
                width: 100%;     /* 宽度100% */
                margin-left: 0;   /* 无左侧外边距 */
                margin-top: 20px; /* 顶部外边距 */
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column; /* 垂直排列 */
                height: auto;    /* 自动高度 */
                padding: 15px;   /* 内边距 */
                gap: 15px;      /* 子元素间距 */
            }
            .controls {
                flex-wrap: wrap; /* 换行 */
                justify-content: center; /* 水平居中 */
            }
            .logo {
                flex-direction: column; /* 垂直排列 */
                align-items: flex-start; /* 左对齐 */
            }
            .logo a {
                margin-top: 8px; /* 顶部外边距 */
            }
        }
    </style>
</head>
<body>
    <!-- ========== 头部区域 ========== -->
    <div class="header">
        <div class="logo">
            <i class="fas fa-bolt"></i>  <!-- 闪电图标 -->
            <div>
                <h1>全国电动汽车数据销售数据可视化仪平台</h1>  <!-- 主标题 -->
                <a href="全国电动汽车用户数据分析平台.html">全国电动汽车用户数据分析平台</a>  <!-- 副标题链接 -->
            </div>
        </div>
        <div class="controls">
            <div class="date-display">
                <i class="fas fa-calendar-alt"></i>  <!-- 日历图标 -->
                <span id="current-date">2025年5月15日</span>  <!-- 当前日期显示 -->
            </div>
            <button class="logout-btn" id="logout-btn">
                <i class="fas fa-sign-out-alt"></i>  <!-- 退出图标 -->
                <span>退出</span>  <!-- 退出文本 -->
            </button>
        </div>
    </div>

    <!-- ========== 主内容区域 ========== -->
    <div class="dashboard-container">
        <!-- 侧边导航栏 -->
        <div class="sidebar">
            <!-- 可视化大屏部分 -->
            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-tv"></i>  <!-- 电视图标 -->
                    <span>可视化大屏</span>  <!-- 标题 -->
                </div>
                <div class="nav-links">
                    <!-- 全国销售数据大屏导航项 -->
                    <div class="nav-item active" data-content="dashboard" data-src="result/全国电动汽车销售数据可视化大屏.html">
                        <i class="fas fa-desktop"></i>  <!-- 桌面图标 -->
                        <span>全国销售数据大屏</span>  <!-- 导航项文本 -->
                    </div>
                </div>
            </div>

            <!-- 地图导航部分 -->
            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-map"></i>  <!-- 地图图标 -->
                    <span>地图导航</span>  <!-- 标题 -->
                </div>
                <div class="nav-links">
                    <!-- 全国销量地图导航项 -->
                    <div class="nav-item" data-content="map" data-src="result/全国电动汽车销量地图.html">
                        <i class="fas fa-globe-asia"></i>  <!-- 地球图标 -->
                        <span>全国销量地图</span>  <!-- 导航项文本 -->
                    </div>
                </div>
            </div>

            <!-- 销售分析部分 -->
            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-chart-line"></i>  <!-- 折线图图标 -->
                    <span>销售分析</span>  <!-- 标题 -->
                </div>
                <div class="nav-links">
                    <!-- 品牌销量利润对比导航项 -->
                    <div class="nav-item" data-content="sales-comparison" data-src="result/品牌销量利润对比柱状图.html">
                        <i class="fas fa-chart-bar"></i>  <!-- 柱状图图标 -->
                        <span>品牌销量利润对比</span>  <!-- 导航项文本 -->
                    </div>
                    <!-- 销量趋势分析导航项 -->
                    <div class="nav-item" data-content="trends" data-src="result/销量趋势折线图.html">
                        <i class="fas fa-chart-line"></i>  <!-- 折线图图标 -->
                        <span>销量趋势分析</span>  <!-- 导航项文本 -->
                    </div>
                    <!-- 月度热销产品导航项 -->
                    <div class="nav-item" data-content="top-products" data-src="result/月度热销产品动态柱状图.html">
                        <i class="fas fa-medal"></i>  <!-- 奖牌图标 -->
                        <span>月度热销产品</span>  <!-- 导航项文本 -->
                    </div>
                </div>
            </div>

            <!-- 价格分析部分 -->
            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-tags"></i>  <!-- 标签图标 -->
                    <span>价格分析</span>  <!-- 标题 -->
                </div>
                <div class="nav-links">
                    <!-- 品牌价格对比导航项 -->
                    <div class="nav-item" data-content="price-comparison" data-src="result/品牌价格对比柱状图.html">
                        <i class="fas fa-tags"></i>  <!-- 标签图标 -->
                        <span>品牌价格对比</span>  <!-- 导航项文本 -->
                    </div>
                    <!-- 价格区间分布导航项 -->
                    <div class="nav-item" data-content="price-distribution" data-src="result/价格区间分布柱状图.html">
                        <i class="fas fa-money-bill-wave"></i>  <!-- 钱币图标 -->
                        <span>价格区间分布</span>  <!-- 导航项文本 -->
                    </div>
                </div>
            </div>

            <!-- 分布分析部分 -->
            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-pie-chart"></i>  <!-- 饼图图标 -->
                    <span>分布分析</span>  <!-- 标题 -->
                </div>
                <div class="nav-links">
                    <!-- 品牌销量占比导航项 -->
                    <div class="nav-item" data-content="sales-distribution" data-src="result/品牌销量占比饼图.html">
                        <i class="fas fa-chart-pie"></i>  <!-- 饼图图标 -->
                        <span>品牌销量占比</span>  <!-- 导航项文本 -->
                    </div>
                    <!-- 销售流向分析导航项 -->
                    <div class="nav-item" data-content="sales-flow" data-src="result/销售流向桑基图.html">
                        <i class="fas fa-exchange-alt"></i>  <!-- 交换图标 -->
                        <span>销售流向分析</span>  <!-- 导航项文本 -->
                    </div>
                </div>
            </div>

            <!-- 利润分析部分 -->
            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-coins"></i>  <!-- 硬币图标 -->
                    <span>利润分析</span>  <!-- 标题 -->
                </div>
                <div class="nav-links">
                    <!-- 品牌利润占比导航项 -->
                    <div class="nav-item" data-content="profit-share" data-src="result/品牌利润占比饼图.html">
                        <i class="fas fa-coins"></i>  <!-- 硬币图标 -->
                        <span>品牌利润占比</span>  <!-- 导航项文本 -->
                    </div>
                </div>
            </div>
            <!-- ========== 新增的用户信息部分 ========== -->
<div class="nav-section">
    <div class="nav-title">
        <i class="fas fa-users"></i>
        <span>用户信息</span>
    </div>
    <div class="nav-links">
        <div class="nav-item" data-content="user-management" data-src="users.html">
            <i class="fas fa-user-cog"></i>
            <span>用户管理系统</span>
        </div>
    </div>
</div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="content-container" id="content-container">
                <div class="content-header">
                    <div class="content-title" id="content-title">
                        <i class="fas fa-desktop"></i>  <!-- 桌面图标 -->
                        <span>全国电动汽车销售数据大屏</span>  <!-- 内容标题 -->
                    </div>
                    <div class="content-actions">
                        <button class="action-btn" title="刷新" id="refresh-btn"><i class="fas fa-sync-alt"></i></button>  <!-- 刷新按钮 -->
                    </div>
                </div>
                <div class="content-body">
                    <!-- iframe用于加载各个图表HTML文件 -->
                    <iframe id="content-frame" class="iframe-container" src="result/全国电动汽车销售数据可视化大屏.html" frameborder="0"></iframe>
                    <!-- 文本区域 - 初始为空，只有在大屏模块不显示 -->
                    <div class="text-container" id="text-container" style="display: none;">
                        <div class="text-title">数据分析说明</div>
                        <div class="text-content" id="text-content">
                            <!-- 这里将动态填充文本内容 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ========== 页脚区域 ========== -->
    <div class="footer">
        <p>© 2025 电动汽车数据分析平台 | 数据更新时间: <span id="update-time">2025年11月15日</span></p>  <!-- 版权信息和更新时间 -->
    </div>

    <script>
        // ========== 页面初始化 ==========

        // 设置当前日期
        document.getElementById('current-date').textContent =
            new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });

        // 设置数据更新时间
        document.getElementById('update-time').textContent =
            new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });

        // ========== 内容标题映射对象 ==========
        // 用于根据导航项的data-content属性值获取对应的图标和标题
        const contentTitles = {
            'dashboard': ['fas fa-desktop', '全国电动汽车销售数据大屏'],
            'map': ['fas fa-globe-asia', '全国电动汽车销量地图'],
            'sales-comparison': ['fas fa-chart-bar', '品牌销量利润对比'],
            'trends': ['fas fa-chart-line', '销量趋势分析'],
            'top-products': ['fas fa-medal', '月度热销产品'],
            'price-comparison': ['fas fa-tags', '品牌价格对比'],
            'price-distribution': ['fas fa-money-bill-wave', '价格区间分布'],
            'sales-distribution': ['fas fa-chart-pie', '品牌销量占比'],
            'sales-flow': ['fas fa-exchange-alt', '销售流向分析'],
            'profit-share': ['fas fa-coins', '品牌利润占比'],
    'user-management': ['fas fa-user-cog', '用户管理系统']
        };

        // ========== 切换内容视图函数 ==========
        /**
         * 切换内容视图函数
         * @param {string} contentType - 内容类型，对应导航项的data-content属性
         * @param {string} src - iframe要加载的HTML文件路径
         */
        function showContent(contentType, src) {
            const contentTitle = document.getElementById('content-title');
            // 从映射对象中获取对应的图标和标题，如果没有则使用默认值
            const [icon, title] = contentTitles[contentType] || ['fas fa-chart-bar', '数据图表'];

            // 更新内容标题
            contentTitle.innerHTML = `<i class="${icon}"></i><span>${title}</span>`;

            // 加载外部HTML文件到iframe
            const frame = document.getElementById('content-frame');
            frame.src = src;

            // 获取文本容器
            const textContainer = document.getElementById('text-container');
            const textContent = document.getElementById('text-content');

            // 如果是大屏模块，隐藏文本区域；否则显示并填充内容
            if (contentType === 'dashboard') {
                textContainer.style.display = 'none';
                // 调整iframe宽度为100%
                frame.style.width = '100%';
            } else {
                textContainer.style.display = 'block';
                // 调整iframe宽度为calc(100% - 320px)
                frame.style.width = 'calc(100% - 320px)';

                // 根据不同的内容类型填充不同的文本
                let contentText = '';
                switch(contentType) {
                    case 'map':
                        contentText = '此地图展示了全国各省市电动汽车的销售分布情况。颜色越深的区域表示销量越高，您可以直观地看到哪些地区的电动汽车市场更为活跃。';
                        break;
                    case 'sales-comparison':
                        contentText = '此图表对比了不同品牌电动汽车的销量和利润情况。柱状图的高度代表销量，颜色深浅代表利润率。通过此图可以分析哪些品牌的市场表现最佳。';
                        break;
                    case 'trends':
                        contentText = '此趋势图展示了电动汽车销量的月度变化情况。通过分析趋势线，可以预测未来的销售走向，为市场策略提供数据支持。';
                        break;
                    case 'top-products':
                        contentText = '此动态柱状图展示了每月最畅销的电动汽车型号。排名会随着时间变化，可以帮助您了解市场上的热门产品。';
                        break;
                    case 'price-comparison':
                        contentText = '此图表对比了不同品牌电动汽车的价格区间。通过对比可以了解各品牌的市场定位和价格策略。';
                        break;
                    case 'price-distribution':
                        contentText = '此图表展示了电动汽车在不同价格区间的销售分布情况。可以帮助分析消费者对不同价位产品的接受程度。';
                        break;
                    case 'sales-distribution':
                        contentText = '此饼图展示了各品牌电动汽车在总销量中的占比情况。可以直观地看到市场占有率分布。';
                        break;
                    case 'sales-flow':
                        contentText = '此桑基图展示了电动汽车从生产到销售的流向情况。可以分析销售渠道的效率和不同地区的销售特点。';
                        break;
                    case 'profit-share':
                        contentText = '此饼图展示了各品牌电动汽车在总利润中的占比情况。结合销量占比可以分析哪些品牌的盈利能力更强。';
                        break;
                        contentText = '这里是关于当前数据图表的分析和说明。您可以根据需要添加详细的数据解读和分析内容。';
                        break;
                    default:
               case 'user-management':
            contentText = '此模块用于管理系统用户信息，包括添加、编辑和删除用户账户。管理员可以在此查看和管理所有注册用户的数据。';
                }
                textContent.innerHTML = contentText;
            }
        }

        // ========== 页面加载完成后执行 ==========
        document.addEventListener('DOMContentLoaded', () => {
            // 初始化默认内容 - 获取当前激活的导航项
            const defaultItem = document.querySelector('.nav-item.active');
            if (defaultItem) {
                const contentType = defaultItem.getAttribute('data-content');
                const src = defaultItem.getAttribute('data-src');
                showContent(contentType, src);
            }

            // 为所有导航项添加点击事件
            document.querySelectorAll('.nav-item').forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有导航项的active类
                    document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
                    // 为当前点击的导航项添加active类
                    this.classList.add('active');

                    // 获取当前导航项的数据属性
                    const contentType = this.getAttribute('data-content');
                    const src = this.getAttribute('data-src');

                    // 切换内容视图
                    showContent(contentType, src);
                });
            });

            // 刷新按钮点击事件
            document.getElementById('refresh-btn').addEventListener('click', function() {
                const frame = document.getElementById('content-frame');
                // 重新加载iframe内容
                frame.src = frame.src;
            });

            // 退出按钮点击事件
            document.getElementById('logout-btn').addEventListener('click', function() {
                // 跳转到a.html页面
                window.location.href = 'index.html';
            });
        });
    </script>
</body>
</html>
